<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta charset="GB18030">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/main.css">
</head>
<body style="margin-top: -50px">
	<div class="panel panel-default" style="margin-top: 0px;">
		<div class="panel-heading">
			<h3 class="panel-title">
				<i class="glyphicon glyphicon-th"></i> 用户管理
			</h3>
		</div>
		<div class="panel-body">
			<form class="form-inline" User="form" style="float: left;">

				<div class="form-group has-feedback">
					<div class="input-group">
						<div class="input-group-addon">用户真实姓名</div>
						<input class="form-control has-success" type="text"
							placeholder="支持模糊查询" id="searchCondition" /> <input
							id="condition" type="text" hidden value="" /> <input id="pn"
							type="text" hidden value="1" />
					</div>
				</div>
				<button type="button" class="btn btn-warning" id="search_btn">
					<i class="glyphicon glyphicon-search"></i> 查询
				</button>
			</form>
			<button class="btn btn-info" style="float: right; margin-left: 10px;"
				id="add">
				<i class=" glyphicon glyphicon-plus"></i> 新增
			</button>
			<br>
			<hr style="clear: both;">
			<div class="table-responsive">
				<table class="table  table-bordered">
					<thead>
						<tr>
							<th width="30">#</th>
							<th>登录名称</th>
							<th>真实名称</th>
							<th>年龄</th>
							<th>性别</th>
							<th>地址</th>
							<th>电话</th>
							<th>部门</th>
							<th>职务</th>
							<th>生日</th>
							<th>身份证号码</th>
							<th>入职时间</th>
							<th>是否启用</th>
							<th width="125">操作</th>
						</tr>
					</thead>
					<!-- 信息展示 -->
					<tbody id="tb1">
					</tbody>
				</table>
			</div>
			<!-- 分页信息 -->
			<div class="row" id="page_div"></div>
		</div>
		<!-- 新增/修改模态框 -->
		<div class="modal fade" id="userModal" tabindex="-1" User="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" User="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">新增用户</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="form1">
							<div class="form-group">
								<label for="inputuserName" class="col-sm-2 control-label">用户名</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputuserName"
										name="UserName" placeholder="请输入用户名"> <input
										type="text" id="inputuserId" name="userId" hidden>
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserRealname" class="col-sm-2 control-label"></label>
								<div class="col-sm-10">
									<span id="sp1"> </span>
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserRealname" class="col-sm-2 control-label">真实姓名</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputuserRealname"
										name="userRealname" placeholder="请输入真实姓名">
								</div>
							</div>

							<div class="form-group">
								<label for="inputuserAge" class="col-sm-2 control-label">年龄</label>
								<div class="col-sm-10">
									<input type="number" class="form-control" id="inputuserAge"
										name="userAge" placeholder="请输入年龄">
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserSex" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-10">
									<input type="radio" name="userSex" id="rad1" value="男" checked />男&nbsp;&nbsp;
									<input type="radio" name="userSex" id="rad2" value="女">女&nbsp;&nbsp;
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserPhone" class="col-sm-2 control-label">电话</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputuserPhone"
										name="userPhone" placeholder="请输入电话">
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserDept" class="col-sm-2 control-label">部门</label>
								<div class="col-sm-10">
									<select class="form-control" id="inputuserDept" name="userDept">

									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserPost" class="col-sm-2 control-label">职位</label>
								<div class="col-sm-10">
									<select class="form-control" id="inputuserPost" name="userPost">

									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserBirthday" class="col-sm-2 control-label">生日</label>
								<div class="col-sm-10">
									<input type="date" class="form-control" id="inputuserBirthday"
										name="userBirthday">
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserIdentity" class="col-sm-2 control-label">身份证</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputuserIdentity"
										name="userIdentity" placeholder="请输入身份证号码">
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserEntrytime" class="col-sm-2 control-label">入职时间</label>
								<div class="col-sm-10">
									<input type="date" class="form-control" id="inputuserEntrytime"
										name="userEntrytime">
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserAddress" class="col-sm-2 control-label">住址</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="inputuserAddress"
										name="userAddress" placeholder="请输入住址">
								</div>
							</div>
							<div class="form-group">
								<label for="inputuserIsuse" class="col-sm-2 control-label">是否启用</label>
								<div class="col-sm-10">
									<input type="radio" name="userIsuse" id="rad3" value="启用"
										checked />启用&nbsp;&nbsp; <input type="radio" name="userIsuse"
										id="rad4" value="禁用">禁用&nbsp;&nbsp;
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="sub1" />
						保存
						</button>
					</div>

				</div>
			</div>
		</div>
		<!-- 新增/修改模态框结束 -->

		<!-- 指派角色模态框 -->
		<div class="modal fade" id="assignModal" tabindex="-1" User="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" User="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel1">指派角色</h4>
					</div>
					<div class="modal-body">
					<form id="form2">
					<input type="text" name="userId" id="asUserId" hidden>
					<div id="div1"></div>
					</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="sub2">保存</button>
					</div>

				</div>
			</div>
		</div>
		<!-- 指派角色模态框结束 -->
		<script
			src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
		<script
			src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
		<script
			src="${pageContext.request.contextPath}/static/script/docs.min.js"></script>
		<script type="text/javascript">
			$(function() {
				loadUsers();
				//查询
				$("#search_btn").click(function() {
					var searchcondition = $("#searchCondition").val();
					$("#condition").val(searchcondition);
					$("#pn").val(1);
					loadUsers();
				})
                //新增
				$("#add").click(function() {
					$("#myModalLabel").html("新增用户");
					$("#inputuserId").val("");
					$.getJSON("${pageContext.request.contextPath}/user/addUser",function(data){
						var depts=data.depts;
						var posts=data.posts;
						var deptsStr = "";
						for (var i = 0; i < depts.length; i++) {
							deptsStr = deptsStr
									+ "<option>"
									+ depts[i]
									+ "</option>";
						}
						$("#inputuserDept").html(
								deptsStr);
						var postsStr = "";
						for (var i = 0; i < posts.length; i++) {
							postsStr = postsStr
									+ "<option>"
									+ posts[i]
									+ "</option>";
						}
						$("#inputuserPost").html(
								postsStr);
						var da=new Date().format("yyyy-MM-dd");
						$("#inputuserBirthday").val(da);
						$("#inputuserEntrytime").val(da);
					$('#userModal').modal('show');
					});
				})
				
				//部门联动职位
				$("#inputuserDept").change(function(){
					var deptName=$(this).val();
					$.getJSON("${pageContext.request.contextPath}/user/getPosts",{"deptName":deptName},function(data){
						var postsStr = "";
						for (var i = 0; i < data.length; i++) {
							postsStr = postsStr
									+ "<option>"
									+ data[i]
									+ "</option>";
						}
						$("#inputuserPost").html(postsStr);
					});
				});
				
				//检查用户名是否存在
				$("#inputuserName").blur(function(){
					var userName=$(this).val();
					if (userName=='') {
						$("#sp1").css("color","red");
						$("#sp1").html("请输入规范格式用户名");
						$("#sub1").prop("disabled",true);
					}else{
					$.getJSON("${pageContext.request.contextPath}/user/nameExists",{"userName":userName},function(data){
						if (data=='用户名已存在') {
							$("#sp1").css("color","red");
							$("#sp1").html(data);
							$("#sub1").prop("disabled",true);
						}else{
							$("#sp1").css("color","green");
							$("#sp1").html(data);
							$("#sub1").prop("disabled",false);
						}
					});
					}
				});
				//新增/修改模态框关闭
				$('#userModal').on('hidden.bs.modal', function() {
					$("#form1")[0].reset();
					$("#sp1").html("");
					$("#sub1").prop("disabled",false);
					$("#inputuserName").prop("readonly",false);
				})
				//新增/修改确认
				$("#sub1").click(function(){
					if ($("#inputuserName").prop("readonly")==false) {
						
						$.post("${pageContext.request.contextPath}/user/doAdd",$("#form1").serialize(),function(data){
							$('#userModal').modal('hide');
							loadUsers();
						});
						
					}else{
						$.post("${pageContext.request.contextPath}/user/doUpdate",$("#form1").serialize(),function(data){
							$('#userModal').modal('hide');
							loadUsers();
						});
					}
				})
				//确认指派角色
				$("#sub2").click(function(){
					$.post("${pageContext.request.contextPath}/user/doAssign",$("#form2").serialize(),function(){
						
						$('#assignModal').modal('hide');
					})
				})
				

			})
		</script>
		<script type="text/javascript">
			function loadUsers() {
				var pn = $("#pn").val();
				var condition = $("#condition").val();
				$
						.ajax({
							url : "${pageContext.request.contextPath}/user/getAll",
							type : "post",
							data : {
								"pn" : pn,
								"condition" : condition
							},
							dataType : "json",
							success : function(data) {
								var list = data.list;
								var isAdmin='${sessionScope.isAdmin}';
								var trStr = "";
								for (var i = 0; i < list.length; i++) {
									trStr = trStr + "<tr>";
									trStr = trStr + "<td>" + (i + 1) + "</td>";
									trStr = trStr + "<td>" + list[i].userName
											+ "</td>";
									trStr = trStr + "<td>"
											+ list[i].userRealname + "</td>";
									trStr = trStr + "<td>" + list[i].userAge
											+ "</td>";
									trStr = trStr + "<td>" + list[i].userSex
											+ "</td>";
									trStr = trStr + "<td>"
											+ list[i].userAddress + "</td>";
									trStr = trStr + "<td>" + list[i].userPhone
											+ "</td>";
									trStr = trStr + "<td>" + list[i].userDept
											+ "</td>";
									trStr = trStr + "<td>" + list[i].userPost
											+ "</td>";
									trStr = trStr + "<td>"
											+ list[i].userBirthday + "</td>";
									trStr = trStr + "<td>"
											+ list[i].userIdentity + "</td>";
									trStr = trStr + "<td>"
											+ list[i].userEntrytime + "</td>";
									trStr = trStr + "<td>" + list[i].userIsuse
											+ "</td>";
									trStr = trStr + "<td>";
									trStr = trStr
											+ "<button type='button' class='btn btn-primary  btn-xs' name='updateUser' userid='"+list[i].userId+"'><i class=' glyphicon glyphicon-pencil'></i></button>";
									trStr = trStr + "&nbsp";
									trStr = trStr
											+ "<button type='button' class='btn btn-success   btn-xs' name='assignUser' userid='"+list[i].userId+"'><i class=' glyphicon glyphicon-user'></i></button>";
									trStr = trStr + "&nbsp";
									if (isAdmin==1) {
										trStr = trStr
										+ "<button type='button' class='btn btn-danger   btn-xs' name='deleteUser' userid='"+list[i].userId+"'><i class=' glyphicon glyphicon-remove'></i></button>";
								trStr = trStr + "&nbsp";
									}
									trStr = trStr
											+ "<button type='button' class='btn btn-default   btn-xs' name='resetUser' userName='"+list[i].userName+"' userid='"+list[i].userId+"'><i class=' glyphicon glyphicon-repeat'></i></button>";
									trStr = trStr + "&nbsp";
									trStr = trStr + "</td>";
								}
								$("#tb1").html(trStr);
								var divStr = "";
								divStr = divStr + "<div align='center'>";
								divStr = divStr + "<ul class='pagination'>";
								divStr = divStr
										+ "<li><a href='javascript:changePage(1)'>首页</a></li>";
								divStr = divStr + "<li>";
								if (data.hasPreviousPage) {
									divStr = divStr
											+ "<a href='javascript:changePage(-1)' aria-label='Previous'> <span aria-hidden='true'>«</span></a>";
								}
								divStr = divStr + "</li>";
								var navigatepageNums = data.navigatepageNums;
								for (var i = 0; i < navigatepageNums.length; i++) {
									if (navigatepageNums[i] == data.pageNum) {
										divStr = divStr
												+ "<li class='active'><a href='#'>"
												+ navigatepageNums[i]
												+ "</a></li>";
									}
									if (navigatepageNums[i] != data.pageNum) {
										divStr = divStr
												+ "<li><a href='javascript:changePage("
												+ navigatepageNums[i] + ")'>"
												+ navigatepageNums[i]
												+ "</a></li>";
									}
								}
								divStr = divStr + "<li>";
								if (data.hasNextPage) {
									divStr = divStr
											+ "<a href='javascript:changePage(-2)' aria-label='Next'> <span aria-hidden='true'>»</span> </a>";
								}
								divStr = divStr + "</li>";

								divStr = divStr
										+ "<li><a href='javascript:changePage("
										+ data.pages + ")'>尾页</a></li>";
								divStr = divStr + "</ul>";
								divStr = divStr + "</div>";
								divStr = divStr + "<div align='center'>当前第 "
										+ data.pageNum + " 页.总共 " + data.pages
										+ " 页.一共 " + data.total + " 条记录</div>";
								$("#page_div").html(divStr);

								//绑定函数
								updateUser();
								assignUser();
								deleteUser();
								resetUser();
							}
						});
			}

			//翻页
			function changePage(page) {
				var pn = $("#pn").val();
				if (page == -1) {
					$("#pn").val(pn - 1);
				} else if (page == -2) {
					var pn1 = parseInt(pn);
					$("#pn").val(pn1 + 1);
				} else {
					$("#pn").val(page);
				}

				loadUsers();
			}
			//修改用户信息
			function updateUser(){
				$("[name=updateUser]").click(function(){
					$("#myModalLabel").html("修改用户");
					var userId=$(this).attr("userid");
					$("#inputuserId").val(userId);
					$.getJSON("${pageContext.request.contextPath}/user/updateUser",{"userId":userId},function(data){
						var depts=data.depts;
						var posts=data.posts;
						var user=data.user;
						var deptsStr = "";
						for (var i = 0; i < depts.length; i++) {
							if (depts[i]==user.userDept) {
								deptsStr = deptsStr
								+ "<option selected>"
								+ depts[i]
								+ "</option>";
							}else{
							deptsStr = deptsStr
									+ "<option>"
									+ depts[i]
									+ "</option>";
									}
						}
						$("#inputuserDept").html(
								deptsStr);
						var postsStr = "";
						for (var i = 0; i < posts.length; i++) {
							if (posts[i]==user.userPost) {
								postsStr = postsStr
								+ "<option selected>"
								+ posts[i]
								+ "</option>";	
							}else{
							postsStr = postsStr
									+ "<option>"
									+ posts[i]
									+ "</option>";
							}
						}
						$("#inputuserPost").html(
								postsStr);
						$("#inputuserBirthday").val(user.userBirthday);
						$("#inputuserEntrytime").val(user.userEntrytime);
						$("#inputuserName").val(user.userName);
						$("#inputuserRealname").val(user.userRealname);
						$("#inputuserAge").val(user.userAge);
						$("#inputuserPhone").val(user.userPhone);
						$("#inputuserIdentity").val(user.userIdentity);
						$("#inputuserAddress").val(user.userAddress);
						if (user.userSex=='男') {
							$("#rad2").prop("checked",false);
							$("#rad1").prop("checked",true);
						}else{
							$("#rad1").prop("checked",false);
							$("#rad2").prop("checked",true);
						}
						if (user.userIsuse=='启用') {
							$("#rad4").prop("checked",false);
							$("#rad3").prop("checked",true);
						}else{
							$("#rad3").prop("checked",false);
							$("#rad4").prop("checked",true);
						}
						$("#inputuserName").prop("readonly",true);
					$('#userModal').modal('show');
					});
				})
			}
			
			//指派角色
			function assignUser(){
				$("[name=assignUser]").click(function(){
					var userId=$(this).attr("userid");
					$("#asUserId").val(userId);
					$.getJSON("${pageContext.request.contextPath}/user/assignUser",{"userId":userId},function(data){
						var roles=data.roles;
						var userRoles=data.userRoles;
						var str="";
						for (var i = 0; i < roles.length; i++) {
							var flag=false;
							for (var j = 0; j < userRoles.length; j++) {
								if (userRoles[j].roleId==roles[i].roleId) {
									flag=true;
									break;
								}
							}
							if (flag==false) {
								str=str+"<input type='checkbox' name='roleIds' value='"+roles[i].roleId+"'>"+roles[i].roleName+"&nbsp;&nbsp;&nbsp;";
							}else{
								str=str+"<input type='checkbox' name='roleIds' checked value='"+roles[i].roleId+"'>"+roles[i].roleName+"&nbsp;&nbsp;&nbsp;";
							}
						}
						$("#div1").html(str);
						$('#assignModal').modal('show');
					})
				});
				
			}
			//删除用户
			function deleteUser(){
				$("[name=deleteUser]").click(function(){
					var userId=$(this).attr("userid");
					$.getJSON("${pageContext.request.contextPath}/user/deleteUser",{"userId":userId},function(data){
						if (data==1) {
							alert("该用户有绑定角色，请先解除绑定");
						}
						loadUsers();
					})
				})
			}
			//重置密码
			function resetUser(){
				$("[name=resetUser]").click(function(){
					var userName=$(this).attr("username");
					$.getJSON("${pageContext.request.contextPath}/user/resetUser",{"userName":userName},function(data){
						alert("重置密码成功！")
					})
				})
			}
			//时间格式化
			Date.prototype.format = function(format){
			    var o = {
			        "M+" : this.getMonth()+1, //month
			        "d+" : this.getDate(), //day
			        "H+" : this.getHours(), //hour
			        "m+" : this.getMinutes(), //minute
			        "s+" : this.getSeconds(), //second
			        "q+" : Math.floor((this.getMonth()+3)/3), //quarter
			        "S" : this.getMilliseconds() //millisecond
			    }
			 
			    if(/(y+)/.test(format)) {
			        format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
			    }
			 
			    for(var k in o) {
			        if(new RegExp("("+ k +")").test(format)) {
			            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
			        }
			    }
			    return format;
			}
		</script>
</body>
</html>